<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  table {
    width: 500px;
    margin: 250px auto;
    border-collapse: collapse;
    text-align: center;
  }

  td,
  th {
    border: 1px solid #333;
  }

  thead tr {
    height: 40px;
    background-color: #ccc;
  }
</style>

<body>
  <table border="1">
    <thead>
      <tr>
        <th>id</th>
        <th>name</th>
        <th>price</th>
      </tr>
    </thead>
    <tbody></tbody>
    <!-- <tr>
      <td>1</td>
      <td>iPhone14</td>
      <td>5999</td>
    </tr>
    <tr>
      <td>2</td>
      <td>iPhone14 Pro</td>
      <td>7999</td>
    </tr>
    <tr>
      <td>3</td>
      <td>iPhone14 Pro Max</td>
      <td>8999</td>
    </tr> -->
  </table>

  <script>
    // 使用下面数据, 生成一个完整数据的表格
    let  data = [
            { id: 1, name: "iPhone14", price: 5999+"￥" },
            { id: 2, name: "iPhone14 Pro", price: 7999+"￥" },
            { id: 3, name: "iPhone14 Pro Max", price: 8999+"￥" }
        ];

        // 2.往tbody 里面创建行：有几个内容（通过数组的长度） 我们就创建几行
        let tbody = document.querySelector('tbody');
        for (let i = 0; i < data.length; i++) {
            // 1.创建行
            let tr = document.createElement('tr');
            tbody.appendChild(tr);
            // 2.行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数 for循环遍历对象
            for (let k in data[i]) {  // 里面的for循环管列 td
                // 创建单元格
                let td = document.createElement('td');
                // 把对象里面的属性值 data[i][k] 给 td
                // console.log(data[i][k]);
                td.innerHTML = data[i][k];
                tr.appendChild(td);
            }
        }
  </script>
</body>

</html>